<template>
  <div id="updateContract" class="updateContract">
	  <h2>编辑合同<span style="float: right"><x-button style="background: gray" mini type="primary" action-type="button" @click.native="onDelete">删除</x-button></span></h2>

	  <group>
		  <cell class="customerCell" title="课程类型" :value="activity_type" is-link @click.native="showPopup=true"></cell>
		  <x-input title="课时" type="number" v-model="points" placeholder="课时数量"></x-input>
		  <x-input title="价格" type="number" v-model="amount" placeholder="合同价值"></x-input>
		  <datetime class="customerCell" title="开始日期" value-text-align="right" v-model="start_date"></datetime>
		  <datetime class="customerCell" title="截止日期" value-text-align="right" v-model="end_date"></datetime>
		  <PickList ref="employeeRef" url="users/users_pop" cellTitle="销售" listTitle="销售列表" max="1"></PickList>
		  <x-textarea title="备注" v-model="description" placeholder="备注" :show-counter="true" :rows="1" autosize></x-textarea>
	  </group>

	  <div v-transfer-dom>
		  <popup v-model="showPopup" class="checker-popup">
			  <div style="padding:10px 10px 40px 10px;">
				  <p style="padding: 5px 5px 5px 2px;color:#888;">课程类型</p>
				  <checker
					  v-model="activity_type"
					  default-item-class="demo4-item"
					  selected-item-class="demo4-item-selected"
					  disabled-item-class="demo4-item-disabled">
					  <checker-item v-for="(item,index) in items" :value="item.value" @on-item-click="onItemClick(item.id)"> {{item.value}} </checker-item>
				  </checker>
			  </div>
		  </popup>
	  </div>

	  <div v-transfer-dom>
		  <confirm v-model="showConfirm"
		           :title="title"
		           @on-cancel="onCancel"
		           @on-confirm="onConfirm"
		           @on-show="onShow"
		           @on-hide="onHide">
			  <p style="text-align:center;">{{ message }}</p>
		  </confirm>
	  </div>

	  <div class="error" v-show="error">{{error}}</div>

	  <flexbox>
		  <flexbox-item>
			  <x-button class="flexBtn_confirm" :gradients="['#FF5E3A', '#FF9500']" @click.native="updateContract">确定</x-button>
		  </flexbox-item>
		  <flexbox-item>
			  <x-button class="flexBtn_cancel" @click.native="cancelUpdate">取消</x-button>
		  </flexbox-item>
	  </flexbox>

  </div>
</template>

<script>
	import bus from '@/event/eventBus'
	import NetWorking from '../../../../utils/networking'
	import PickList from '../../../../components/mobile/picklist/picklist'
  import {Confirm, Group, XInput, XButton, Cell, TransferDom, Popup, Checker, CheckerItem, Datetime, XTextarea, Flexbox, FlexboxItem} from 'vux'
  export default {
    name: "newSignedLesson",
	  directives: {
		  TransferDom
	  },
    components:{
	    PickList,
      Group,
      XInput,
      XButton,
      Cell,
	    TransferDom,
	    Checker,
	    CheckerItem,
	    Popup,
	    Datetime,
	    Confirm,
	    XTextarea,
	    Flexbox,
	    FlexboxItem
    },
    data() {
    	return {
    		id: '',
		    customer_id: this.$route.params.id,
		    showPopup: false,
		    oldPoints: '',
		    points: '',
		    amount: '',
		    description: '',
		    activity_type: '',
		    activity_type_id: '',
		    items: [],
		    start_date: '',
		    end_date: '',
		    error: '',
		    showConfirm: false,
		    title: '操作提示',
		    message: '确定删除吗？',
	    }
    },
	  created: function () {
		  bus.$emit("setTopSimpleTitle", '课程编辑')
		  let _this = this

		  var lov_url = 'list_of_value/getListOfValueByType'
		  var contract_url = 'contract/getContractModelByModelId'
		  var urlarr = new Array()
		  urlarr.push(
			  NetWorking.doGet(
				  lov_url,
				  null,
				  {params: {type: 'S_LOV_LESSON'}}
			  ))

		  urlarr.push(
			  NetWorking.doGet(
				  contract_url,
				  null,
				  {params: {id: this.$route.params.id}}
			  ))

		  var callback = function (c1, c2) {
			  _this.items = c1.data.list_of_value
			  let rs2 = c2.data.contract

			  _this.id = rs2.id
			  _this.customer_id = rs2.customer_id
			  _this.points = rs2.points
			  _this.oldPoints = rs2.points
			  _this.amount = rs2.amount
			  _this.start_date = rs2.start_date
			  _this.end_date = rs2.end_date

			  _this.activity_type_id = rs2.lesson_id
			  _this.activity_type = rs2.lesson

			  _this.description = rs2.description

			  _this.$refs.employeeRef.fullValues.push({label: rs2.user, value: rs2.user_id})

		  }

		  NetWorking.doAll2(urlarr).then(this.axios.spread(callback))
			  .catch(function (e){
				  console.log(2);
			  });
	  },
    methods: {
	    cancelUpdate: function () {
		    this.$router.go(-1)
	    },
	    onCancel () {
		    console.log('on cancel')
	    },
	    onConfirm (msg) {
		    this.deleteContract()
	    },
	    onHide () {
		    console.log('on hide')
	    },
	    onShow () {
		    console.log('on show')
	    },
    	onDelete() {
		    this.showConfirm = true
	    },
	    onItemClick (value) {
		    this.activity_type_id = value

		    if (!this.disabled) {
			    this.showPopup = false
		    }
	    },
	    deleteContract: function () {
		    let _this = this
		    NetWorking.doDelete(
			    'contract',
			    null,
			    {
				    params: {
				    	id: this.id
				    }
			    }
		    ).then(
			    response => {
				    let rs = response.data
				    if(rs.error_code == 0){
					    this.$router.go(-1)
				    }else{
					    alert(rs.error_message);
				    }
			    }
		    )
	    },
	    updateContract: function () {
		    if(this.activity_type_id == ''){
			    this.error = "请确认课程类型是正确的"
			    return
		    }

		    if(this.points <= 0){
			    this.error = "请确认课时数是正确的"
			    return
		    }

		    if(this.start_date == '' || this.end_date == ''){
			    this.error = "请输入正确的有效期开始和截止时间"
			    return
		    }

		    if(this.start_date > this.end_date){
			    this.error = "截止期不能小于起始日期"
			    return
		    }

		    let _this = this
		    NetWorking.doPut(
			    'contract',
			    null,
			    {
			    	id: this.id,
				    customer_id: this.customer_id,
				    lesson_id: this.activity_type_id,
				    start_date: this.start_date,
				    end_date: this.end_date,
				    points: this.points,
				    amount: this.amount,
				    description: this.description
			    },
			    {
				    headers: {
					    'Content-Type': 'application/json;charset=utf-8',
					    'data': 'JSON.stringify(json)'
				    },
				    params: {
					    "employeeList": JSON.stringify(this.$refs.employeeRef.fullValues)
				    }
			    }
		    ).then(
			    response => {
				    let rs = response.data
				    if(rs.error_code == 0){
					    this.$router.go(-1)
				    }else{
					    alert(rs.error_message);
				    }
			    }
		    )
	    }
    }
  }
</script>

<style>
	.error{
		font-size: 15px;
		color:red;
		text-align: center;
		margin-top: 10px;
	}

	.flexBtn {
		width: 80% !important;
		margin-top: 15px;
		margin-bottom: 5px;
		border-radius: 25px;
	}

  .updateContract {
    border: solid;
    border-color: #f7f7fa;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 56px;
    box-shadow: 5px 5px 5px #888888;
    border-radius: 25px;
  }
  .buttonCustomer {
	  width: 50%;
    border-radius: 25px;
	  margin-top: 15px;
	  margin-bottom: 15px;
  }

	.customerCell {
		height: 1.41176471em !important;
		line-height: 1.41176471 !important;
		text-decoration: none;
	}

	.weui-cell__bd {
		text-align: left;
	}
</style>
